<template>
	<view>
		<view class="box1">
			<view class="search-bar">
				<view class="search-bar-box">
					<image class="search-span" src="../../static/搜索框.png" />
					<input type="text" placeholder="请输入产品的关键词" class="search-text" v-model="SearchInformation" focus />
					<button class="search-btn" @click="saveOldMesage()">搜索</button>
				</view>
			</view>
		</view>
		<view class="result">
			<text style="font-size: 40rpx; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif">
				--------搜索结果-------
			</text>

			<view class="result_1" v-for="v in searchResult" @click="tomore(v)">
				<view class="picture">
					<image :src="v.storePhoto"></image>
				</view>
				<view class="information">
					<view>{{ v.storeName }}</view>
					<uni-rate :readonly="true" :value="v.score" color="#bbb" active-color="red" />
					<view>距离：{{ v.distance }}km</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../util/http';

export default {
	data() {
		return {
			ComId: '',
			SearchInformation: '',
			list: [],
			goodlist: [],
			hotlist: [],
			Value: 2,
			searchResult: [],
			UserLocation: {
				latitude: 30.779795,
				longitude: 103.85457
			}
		};
	},

	methods: {
		tomore(v) {
			let myJsonString = JSON.stringify(v);
			if (v.storeCategory == 4) {
				uni.navigateTo({
					url: '../oil/oilDetail?myJson=' + myJsonString
				});
			} else
				uni.navigateTo({
					url: '../shop/store?id=' + v.id
				});
		},

		saveOldMesage() {
			if (this.SearchInformation != '') {
				http({
					url: '/store/getStoreByStoreName',
					data: {
						storeName: this.SearchInformation,
						latitude: this.UserLocation.latitude,
						longitude: this.UserLocation.longitude
					},
					success: (res) => {
						this.searchResult = res.data.data;
						if (res.data.data == '') {
							uni.showToast({
								title: '这里没有你要查询的哟！',
								icon: 'none'
							});
						}
						this.SearchInformation = '';
					},
					fail: (res) => {
						console.log('请求失败');
					}
				});
			} else
				uni.showToast({
					title: '请输入内容',
					icon: 'none',
					duration: 500
				});
		},

		toshop() {
			uni.navigateTo({
				url: '../shop/commodity'
			});
		}
	}
};
</script>

<style>
/* 搜索结果 */
.information :nth-child(1) {
	font-size: 35rpx;
}

.information :nth-child(3) {
	font-size: 30rpx;
}

.picture image {
	width: 220rpx;
	height: 220rpx;
	border-radius: 25px 0px 0px 25px;
}

.result_1 {
	background-color: white;
	display: flex;
	width: 90%;
	border-radius: 25px;
	margin-top: 20rpx;
}

.result {
	display: flex;
	flex-direction: column;
	background-color: gainsboro;
	justify-content: center;
	align-items: center;
}

/* 最近搜索 */
.box2 {
	height: 60rpx;
	display: flex;
}

.box2 view:nth-child(1) {
	width: 650rpx;
	height: 60rpx;
	font-size: 30rpx;
	font-weight: bold;
	line-height: 60rpx;
	margin-left: 20rpx;
}

.box2 view:nth-child(2) {
	height: 60rpx;
	padding-top: 10rpx;
}

.box2 image {
	width: 40rpx;
	height: 40rpx;
}

/* 热门显示 */
.hotSerch {
	width: 750rpx;
	flex-wrap: wrap;
	display: flex;
	align-content: flex-start;
}

.hotSerch view {
	height: 40rpx;
	padding-left: 15rpx;
	padding-right: 15rpx;
	margin-top: 10rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
	font-size: 30rpx;
	text-align: center;
	line-height: 40rpx;
	border: 3rpx solid rgba(228, 228, 228, 1);
	border-radius: 25rpx;
}

.hot {
	margin-top: 20rpx;
	width: 750rpx;
	height: 60rpx;
	font-size: 30rpx;
	font-weight: bold;
	line-height: 60rpx;
	margin-left: 20rpx;
}

/* 显示内容 */
.oldSearch {
	width: 750rpx;
	flex-wrap: wrap;
	display: flex;
	align-content: flex-start;
}

.oldSearch view {
	height: 40rpx;
	padding-left: 15rpx;
	padding-right: 15rpx;
	margin-top: 10rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
	font-size: 30rpx;
	text-align: center;
	line-height: 40rpx;
	border: 3rpx solid rgba(228, 228, 228, 1);
	border-radius: 25rpx;
}

// 搜索框
.search-bar {
	width: 100%;
	height: 100rpx;
	margin-top: 2%;
}

.search-bar-box {
	display: flex;
	margin: 0 auto;
	width: 620rpx;
	height: 70rpx;
	border: 5rpx solid #00a8cc;
	border-radius: 50rpx;
}

.search-span {
	width: 100rpx;
	height: 56rpx;
	margin-top: 6rpx;
	margin-left: 30rpx;
}

.search-text {
	width: 100%;
	margin-top: 10rpx;
	margin-left: 20rpx;
	font-size: 30rpx;
	color: #7f7f81;
}

.search-btn {
	background-color: #00a8cc;
	/* Green */
	color: white;
	text-align: center;
	display: inline-block;
	font-size: 35rpx;
	width: 240rpx;
	height: 70rpx;
	line-height: 65rpx;
	border-radius: 30rpx;
	letter-spacing: 3rpx;
}
</style>
